/**
* @Author: 李晨光
* @Date: 2019/12/16
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/16
**/
<comment>
  # 问题上报
</comment>
<template>
  <div id="IssueReport" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>问题上报
      </mu-appbar>
    </div>
    <div style="height:calc(100vh - .45rem);overflow: auto;background: #fff;" class="history">
      <mu-container ref="container" class="lan-loadmore-content no-padding">
        <mu-form
          :model="form"
          class="mu-lan-form"
          :label-position="'left'"
          label-width
          style="margin-top: 1px;"
        >
          <mu-form-item label="项目名称" class="form-between required">
            <span
              class="normal-font-size form-right-text"
              @click="open('org')"
            >{{form.orgName ? form.orgName : '请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="所属区域" class="form-between required">
            <span
              class="normal-font-size form-right-text"
              @click="open('area')"
            >{{form.areaName ? form.areaName : '请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="问题描述" class="inline-item required">
            <mu-text-field
              v-model="form.problemDesc"
              multi-line
              placeholder="请输入"
              :rows="4"
              :rows-max="8"
            ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="问题部位" class="inline-item required">
            <mu-text-field
              v-model="form.problemPart"
              multi-line
              placeholder="请输入"
              :rows="4"
              :rows-max="8"
            ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="现场照片" class="inline-item required">
            <div class="ly_flex ly_flex_wrap_wrap">
              <div
                style="position: relative;width: .7rem;height: .7rem;margin-right: .095rem;margin-bottom: .08rem;border-radius:0.02rem;background:rgba(216,216,216,1);overflow: hidden"
                v-for="(url, index) in handurl(form.scenePhotos)"
                :key="index"
              >
                <img
                  :src="url"
                  style="transform: scale(1.5)"
                  @click="open('imgPreview',{url: url})"
                  alt
                />
                <i
                  class="iconfont iconqingchu"
                  @click.stop="delImg(form, url)"
                  style="color: #FF4242;position: absolute;right: .05rem; top: 0;"
                ></i>
              </div>
              <div style="margin: 0 .1rem .14rem 0;" v-if="handurl(form.scenePhotos).length < 5">
                <FileUpload @successed="confirm('imgUpload',{res: $event, form})"></FileUpload>
              </div>
            </div>

            <!-- <mt-switch v-model="form.useTable"></mt-switch> -->
          </mu-form-item>
          <mu-form-item label="备注" class="inline-item">
            <mu-text-field
              v-model="form.remark"
              multi-line
              placeholder="请输入"
              :rows="4"
              :rows-max="8"
            ></mu-text-field>
          </mu-form-item>

          <mu-form-item label="审核人" class="inline-item required" style="padding-bottom: 10px">
            <div class="userBox" v-for="(user, index) in form.reviewUsers" :key="index">
              <div
                class="ly_flex ly_flex_just_center ly_flex_ali_center add"
              >{{user.label.substr(0,1)}}</div>
              <span>{{user.label}}</span>
              <i
                class="iconfont iconqingchu"
                @click.stop="delUser('reviewUser',form, user.value)"
                style="color: #FF4242;position: absolute;right: .05rem; top: 0;"
              ></i>
            </div>
            <div style @click="open('user', {form, type: 'reviewUser'})">
              <div class="userTrigger" @click="sheetVisible = true">
                <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
                  <i class="iconfont iconplus"></i>
                </div>
                <span>添加人员</span>
              </div>
            </div>
          </mu-form-item>
        </mu-form>
        <div style="padding:0 14px;">
          <mu-button full-width color="primary" style="margin:.2rem 0" @click="save">提交</mu-button>
        </div>
      </mu-container>
    </div>
    <!-- 选项目 -->
    <Org
      ref="org"
      v-if="org.open"
      :open="org.open"
      :orgType="org.orgType"
      @close="close('org')"
      v-model="org.res"
      @confirm="confirm('org')"
    ></Org>
    <!-- 选人 -->
    <User
      ref="User"
      v-if="user.open"
      :open="user.open"
      :multiple="user.multiple"
      :orgType="user.userType"
      :dataScope="'org-project'"
      @close="close('user')"
      v-model="user.res"
      @confirm="confirm('user')"
    ></User>
    <!--选择区域-->
    <SelectArea
      v-if="area.open"
      :open="area.open"
      v-model="area.res"
      :currentProject="area.currentProject"
      @close="close('area')"
      @confirm="confirm('area')"
    ></SelectArea>
    <!--图片预览-->
    <FilePreview :fileUrl="imgPreview.imgUrl" :open="imgPreview.open" @close="close('imgPreview')"></FilePreview>
  </div>
</template>

<script>
import SelectArea from "@/select/area/Area.vue";
import Org from "@/select/org/Org.vue";
import User from "@/select/user/User.vue";
import FilePreview from "@/preview/FilePreview.vue";
import FileUpload from "@/fileUpload/FileUpload.vue";
export default {
  name: "IssueReport",
  components: {
    SelectArea,
    Org,
    User,
    FilePreview,
    FileUpload
  },
  props: {},
  data() {
    return {
      api: {
        addIssueReportApi: "/safety/problemReport/add" // 问题上报
      },
      // 组织选择
      org: {
        open: false,
        orgType: "currOrgProject",
        res: []
      },
      // 人员选择
      user: {
        open: false,
        userType: "currOrgProject",
        res: [],
        type: "",
        multiple: true
      },
      // 图片预览
      imgPreview: {
        open: false,
        imgUrl: ""
      },
      // 区域选择
      area: {
        open: false,
        currentProject: {},
        res: {}
      },
      // 图片上传
      imgUpload: {
        open: false
      },
      form: {
        approvalUserId: "", //审批人
        areaId: "", //区域id
        areaName: "",
        orgId: "", //项目id
        orgName: "",
        problemDesc: "", //问题描述
        problemPart: "", //问题部位
        remark: "", //备注
        scenePhotos: "" //现场照片
      }
    };
  },
  computed: {},
  created() {
    let orgInfo = this.$A.GS("orgInfo");
    if (orgInfo.type == "1") {
      this.form.orgId = orgInfo.orgId;
      this.form.orgName = orgInfo.orgName;
      this.area.currentProject = {
        label: orgInfo.orgName,
        value: orgInfo.orgId,
        type: orgInfo.type
      };
    }
  },
  mounted() {},
  watch: {},
  methods: {
    getIssuRepoDetail() {},
    // 组件打开
    open(type, props = {}) {
      switch (type) {
        // 组织
        case "org":
          this.org.open = true;
          break;
        // 人员
        case "user":
          this.user.res = [];
          this.form = props.form;
          this.user.type = props.type;
          if (this.user.type == "reviewUser") {
            this.user.multiple = false;
            this.user.res = props.form.reviewUsers || [];
          }
          this.user.open = true;
          break;
        // 区域
        case "area":
          this.area.open = true;
          break;
        // 图片预览
        case "imgPreview":
          this.imgPreview.imgUrl = props.url;
          this.imgPreview.open = true;
          break;
        // 图片上传
        case "imgUpload":
          this.imgUpload.open = true;
          break;
      }
    },
    // 组件弹窗关闭
    close(type, props = {}) {
      switch (type) {
        // 组织
        case "org":
          this.org.open = false;
          break;
        // 人员
        case "user":
          this.user.open = false;
          break;
        // 区域
        case "area":
          this.area.open = false;
          break;
        // 图片预览
        case "imgPreview":
          this.imgPreview.open = false;
          break;
        // 图片上传
        case "imgUpload":
          this.imgUpload.open = false;
          break;
      }
    },
    // 结果确认
    confirm(type, props) {
      switch (type) {
        // 组织
        case "org":
          this.form.orgId = this.org.res[0].value;
          this.form.orgName = this.org.res[0].label;
          this.area.currentProject = this.org.res[0];
          this.org.open = false;
          break;
        // 人员
        case "user":
          this.user.open = false;
          this.addUser(this.user.type);
          break;
        // 区域
        case "area":
          this.form.areaId = this.area.res.id;
          this.form.areaName = this.area.res.name;
          this.area.open = false;
          break;
        // 图片预览
        case "imgPreview":
          this.imgPreview.open = false;
          break;
        // 图片上传
        case "imgUpload":
          this.addImg(
            props.form,
            this.$A.baseUrl[0] +
              "/safety/system/download?fileUrl=" +
              props.res.body
          );
          this.imgUpload.open = false;
          break;
      }
    },

    handurl(str) {
      if (!str) {
        return [];
      } else {
        return str.split(",");
      }
    },
    // 添加人员
    addUser(type) {
      let ids = [];
      this.user.res.forEach(u => {
        if (!ids.includes(u.value)) {
          ids.push(u.value);
        }
      });
      switch (type) {
        case "reviewUser":
          this.form.reviewUsers = this.user.res;
          this.form.approvalUserId = ids.join(",");
          break;
      }
    },
    // 删除人员
    delUser(type, form, id) {
      let ids = [];
      switch (type) {
        // 复查人
        case "reviewUser":
          form.reviewUsers.splice(
            form.reviewUsers.findIndex(i => i.value == id),
            1
          );
          this.$forceUpdate();
          form.reviewUsers.forEach(u => {
            if (!ids.includes(u.value)) {
              ids.push(u.value);
            }
          });
          form.approvalUserId = ids.join(",");
          break;
      }
    },
    // 添加照片
    addImg(form, url) {
      let arr = this.handurl(form.scenePhotos);
      arr.push(url);
      form.scenePhotos = arr.join(",");
    },
    // 删除照片
    delImg(form, url) {
      let arr = this.handurl(form.scenePhotos);
      arr.splice(arr.indexOf(url), 1);
      form.scenePhotos = arr.join(",");
    },
    // 验证表单
    validateForm() {
      if (!this.form.orgId) {
        this.$A.MS(`请选择项目`);
        return false;
      }

      if (!this.form.areaId) {
        this.$A.MS(`请选择区域`);
        return false;
      }
      if (!this.form.problemDesc) {
        this.$A.MS(`请填写问题描述`);
        return false;
      }
      if (!this.form.problemPart) {
        this.$A.MS(`请填写问题部位`);
        return false;
      }

      if (!this.form.scenePhotos) {
        this.$A.MS(`请添加现场照片`);
        return false;
      }

      if (!this.form.approvalUserId) {
        this.$A.MS(`请选择审核人`);
        return false;
      }
      return true;
    },
    save() {
      if (this.validateForm()) {
        this.$A
          .Go("post", this.api.addIssueReportApi, this.form)
          .then(response => {
            Util.processRes(response, () => {
              this.$A.MS(`提交成功`);
              this.$router.back();
            });
            Util.processError(this, response);
          })
          .catch(err => {
            this.$closeLoading();
            console.log(err);
          });
      }
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#IssueReport {
  .imgTrigger {
    height: 0.75rem;
    width: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .userTrigger {
    height: 0.75rem;
    width: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #0080cb;
    .add {
      border-radius: 0.25rem;
      width: 0.5rem;
      height: 0.5rem;
      border: 0.01rem solid rgba(0, 128, 203, 1);
    }
  }
  .userBox {
    margin-top: 4px;
    position: relative;
    height: 0.75rem;
    width: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #0080cb;
    border-radius: 0.02rem;
    overflow: hidden;
    color: rgba(61, 61, 61, 1);
    .add {
      border-radius: 0.25rem;
      width: 0.5rem;
      height: 0.5rem;
      font-size: 0.26rem;
      color: #fff;
      background: rgba(0, 128, 203, 1);
      border: 0.01rem solid rgba(0, 128, 203, 1);
    }
  }
}
</style>
